
@base: brown;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);
/* Implementation */
.one   {background-color: @base;}
.two   {background-color: @complement1;}
.three {background-color: @complement2;}
.four  {background-color: @lighten1;}
.five  {background-color: @lighten2;}


@base: brown;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);
//Implementation
.brown1  {background-color: @lighter2;}
.brown2  {background-color: @lighter1;}
.brown3  {background-color: @base;}
.brown4  {background-color: @darker1;}
.brown5  {background-color: @darker2;}
.brown   {background-color: @base;}


.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
  -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
  -moz-border-radius: @topleft @topright @bottomright @bottomleft;
  -ms-border-radius: @topleft @topright @bottomright @bottomleft;
  -o-border-radius: @topleft @topright @bottomright @bottomleft;
  border-radius: @topleft @topright @bottomright @bottomleft;
}
.radiusdiv {
  .border-radius-custom(20px, 20px, 0px, 0px);
}


.box-shadow (@x: 0px, @y: 3px, @blur:5px, @alpha:0.5) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -ms-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -o-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
.shadowdiv {
  .box-shadow(10px, 10px, 5px, 0.5);
}


.transform (@rotate: 90deg, @scale:1, @skew:1deg, @translate:10px) {
  -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
.transformdiv {
  .transform(5deg, 0.8, 1deg, 0px);
}


.linear-gradient (@origin: left; @start: #ffffff; @stop: #000000) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
}
.linear-gradient_div {
  .linear-gradient(left, #663333, #333333);
}


.quick-gradient (@origin: left; @alpha: 0.5) {
  background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
.quick-gradient_div {
  background-color: brown;
  .quick-gradient(top, 0.5);
}


.transition (@prop: all; @time: 1s; @ease: linear) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}
.transitiondiv {
  .transition(all, 2s, ease-in);
}


.reflect (@length: 50%; @opacity: 0.2) {
  box-reflect: below 0px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));
//  box-reflect: below 0px -webkit-gradient(linear, left, top, bottom, from(transparent), color-stop(@length, transparent),to(rgba(255,255,255,@opacity)));
}
.reflectdiv {
  .reflect(50%, 0.5);
}



